<template>
  <div class="boxList">
    <h1>名称：{{ item.name }}</h1>
    <div>简介：{{ item.restDescribe }}</div>
    <div>建造费用：{{ item.cost }}</div>
    <a-button
      v-if="isJoin"
      class="boxButton"
      @click="joinOld(item)"
      type="primary"
      status="success"
      >加入养老院</a-button
    >
    <a-button
      v-else
      class="boxButton"
      @click="exitOld(item)"
      type="primary"
      status="warning"
      >退出</a-button
    >
  </div>
</template>

<script setup lang="ts">
import { getJoinOld, getExitOld } from "@/apis/oldman";
import { defineProps } from "vue";
import { Message } from "@arco-design/web-vue";
const props = defineProps({
  item: {
    // 这里直接接收数组，不需要额外处理ref
    type: Array,
    required: true,
  },
  isJoin: {
    type: Boolean,
    required: true,
  },
  myOld: {
    type: Function,
    required: false,
  },
});
console.log(props.value);
console.log(props);

// 加入养老院
const joinOld = (item) => {
  getJoinOld({
    id: item.id,
  })
    .then((res) => {
      Message.success("加入成功");
    })
    .catch((err) => {
      Message.error("加入失败,请先退出已加入的养老院");
    });
};

// 退出养老院
const exitOld = (item) => {
  getExitOld({
    id: item.id,
  })
    .then((res) => {
      Message.success("退出成功");
      props.myOld();
    })
    .catch((err) => {
      Message.error("退出失败");
    });
};
</script>

<style scoped>
.boxList {
  position: relative;
}
.boxButton {
  position: absolute;
  bottom: 50px;
  right: 50px;
}
</style>
